<template>
  <div class="grids">
    <h1 class="subheading grey--text">{{ $route.meta.title || 'vuetify 使用案例'}}</h1>
    <v-container  class="my-5">
      <!-- 普通栅格系统 -->
      <v-layout row wrap>
        <v-flex xs12 md6><v-btn block outlined>1</v-btn></v-flex>
        <v-flex xs4 md2><v-btn block outlined>2</v-btn></v-flex>
        <v-flex xs4 md2><v-btn block outlined>3</v-btn></v-flex>
        <v-flex xs4 md2><v-btn block outlined>4</v-btn></v-flex>
      </v-layout>

      <!-- 自动分配空间 -->
      <v-layout row wrap justify-space-around>
        <v-flex xs4 md3><v-btn block outlined>1</v-btn></v-flex>
        <v-flex xs4 md3><v-btn block outlined>2</v-btn></v-flex>
      </v-layout>

      <!-- 居中空间 -->
      <v-layout row wrap justify-center>
        <v-flex xs4 md3><v-btn block outlined>1</v-btn></v-flex>
        <v-flex xs4 md3><v-btn block outlined>2</v-btn></v-flex>
      </v-layout>

      <!-- 靠两侧分配空间 -->
      <v-layout row wrap justify-space-between>
        <v-flex xs4 md3><v-btn block outlined>1</v-btn></v-flex>
        <v-flex xs4 md3><v-btn block outlined>2</v-btn></v-flex>
      </v-layout>

      <!-- 靠右侧 -->
      <v-layout row wrap justify-end>
        <v-flex xs4 md3><v-btn block outlined>1</v-btn></v-flex>
        <v-flex xs4 md3><v-btn block outlined>2</v-btn></v-flex>
      </v-layout>

      <!-- 靠左侧 -->
      <v-layout row wrap justify-start>
        <v-flex xs4 md3><v-btn block outlined>1</v-btn></v-flex>
        <v-flex xs4 md3><v-btn block outlined>2</v-btn></v-flex>
      </v-layout>

    </v-container>
  </div>
</template>

<script>
export default {
  name: 'Grids'
}
</script>

<style scoped>
</style>
